<template>
  <div class="contianer">
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        height="550px"
        size="big"
        :highlight-current-row="true"
        stripe
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="角色名" width="120" sortable> </el-table-column>
        <el-table-column prop="roleKey" label="角色权限字符串" width="150"> </el-table-column>
       
        <el-table-column  label="禁用"  width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1"
              active-color="#ff4949"
              inactive-color="#13ce66"
              @change="bitRolebtn(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="说明"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot="header">
            <p style='float:left;'>操作</p>
            <el-button type="warning" size='small' @click='openAddRole = true' round style='float:right;'>添加角色</el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="openUpdateRole(scope.row)"  round>角色编辑</el-button>
            <el-button type="primary" size="mini" @click="openRoleAdminDrawer(scope.row.id)" round>权限管理</el-button>
            <el-button type="danger" size="mini" @click="deleteRole(scope.row)" round>删除角色</el-button>
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
      >
      </el-pagination>
    </div>

    <el-drawer
        title="角色权限管理"
         :visible.sync="roleAdminDrawer"
         direction="rtl"
         size="450px">
         <el-table
         class="drawer-table"
         ref="multipleTable"
         :data="drawerData"
         tooltip-effect="dark"
         style="width: 100%"
         @selection-change="handleSelectionChange">
         <el-table-column
           type="selection"
           width="55">
         </el-table-column>
         <el-table-column
           label="权限名"
           width="300">
           <template slot-scope="scope">{{ scope.row.menuName }}</template>
         </el-table-column>
       </el-table>
       <el-button type="danger"  class="update-role-menu" @click="updateRoleMenu();">确定</el-button>
       <el-button type="info" @click="roleAdminDrawer = false"  class="update-role-menu">取消</el-button>
    </el-drawer>

    <el-dialog :visible.sync="openAddRole" :width="'800px'">
      <div slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-s-order" style="margin-right:10px"></i>
        </span>
        <span class="title-age" @click="openAddRole = true">添加角色</span>
      </div>
      <div  class="open-add-role">
        <el-form :label-position="labelPosition" label-width="80px" :model="addRoleObj" >
          <el-form-item label="名称">
            <el-input v-model="addRoleObj.name"></el-input>
          </el-form-item>
          <el-form-item label="角色权限字符集">
            <el-input v-model="addRoleObj.roleKey"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="addRoleObj.remark"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="danger" @click="addRole"  class="update-role-menu">确定</el-button>
        <el-button type="info" @click="openAddRole = false"  class="update-role-menu">取消</el-button>
      </div>
      
    </el-dialog>

    <el-dialog :visible.sync="openUpdateRoleDialog" :width="'800px'">
      <div slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-s-order" style="margin-right:10px"></i>
        </span>
        <span class="title-age" @click="openAddRole = true">角色编辑</span>
      </div>
      <div  class="open-add-role">
        <el-form :label-position="labelPosition" label-width="80px" :model="updateRoleObj" >
          <el-form-item label="名称">
            <el-input v-model="updateRoleObj.name"></el-input>
          </el-form-item>
          <el-form-item label="角色权限字符集">
            <el-input v-model="updateRoleObj.roleKey"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="updateRoleObj.remark"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="danger" @click="updateRole"  class="update-role-menu">确定</el-button>
        <el-button type="info" @click="openUpdateRoleDialog = false"  class="update-role-menu">取消</el-button>
      </div>
      
    </el-dialog>
  </div>
</template>

<script>
import { $findAllRole } from "@/assets/api/user.js";
import { $bitRole } from "@/assets/api/user.js";
import { $findAllMenu } from "@/assets/api/user.js";
import { $updateRoleMenu } from "@/assets/api/user.js";
import { $addRole } from "@/assets/api/user.js";
import { $updateRole } from "@/assets/api/user.js";
import { $getRoleById } from "@/assets/api/user.js";
import { $deleteRole } from "@/assets/api/user.js";

export default{
  data() {
    return {
      labelPosition: 'top',
      addRoleObj: {
          name: '',
          roleKey: '',
          remark: ''
      },
      updateRoleObj: { },
      openUpdateRoleDialog:false,
      openAddRole:false,
      drawerData: [],
      multipleSelection: [],
      roleAdminDrawer:false,
      tableData: [],
      selectFind: "",
      selectFindValue: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isSelectFind: false,
      selectValue: "",
      inputValue: "",
      roleId:"",
    };
  },
  created() {
    this.findAllRole();
    
  },
  methods: {
    deleteRole(rows){
      
      this.$confirm('此操作将删除'+ rows.name  +'角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $deleteRole(rows).then((res) =>{
        this.message(res);
      })
        }).catch(() => {});
     
    },
    openUpdateRole(rows){
      this.openUpdateRoleDialog = true;
      this.updateRoleObj = rows;
    },
    updateRole(){
      $updateRole(this.updateRoleObj).then((res) =>{
        this.message(res);
        if(res.data.success){
          this.openUpdateRoleDialog = false;
          this.updateRoleObj = {};
        }
      })
    },
    addRole(){
      $addRole(this.addRoleObj).then((res) =>{
        this.message(res);
        if(res.data.success){
          this.addRoleObj = [];
          this.openAddRole = false;
          this.findAllRole();
        }
      })
    },
    updateRoleMenu(){
      this.$confirm("该操作将会修改改角色权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let updateRoleMenuIdList = [];
           for(var x = 0;x<this.multipleSelection.length;x++){
             updateRoleMenuIdList.push(this.multipleSelection[x].id);
           }
           $updateRoleMenu(updateRoleMenuIdList,this.roleId).then((res) =>{
             this.message(res);
             this.findAllMenu();
           })
      }).catch(() => {});
    },
    openRoleAdminDrawer(roleId){
      this.roleId = roleId;
      
      this.roleAdminDrawer = true;
      this.findAllMenu();
    },
    async findAllMenu(){
      this.drawerData=[];
      this.multipleSelection=[];
      await $findAllMenu(this.roleId).then((res) =>{
        if(res.data.success){
          this.drawerData = res.data.data.findAllMenu;
          this.multipleSelection = JSON.parse(JSON.stringify(res.data.data.wqunSysRoleMenus));
        }else{
          this.message(res);
        }
      })
      await this.toggleSelection();
    },
    toggleSelection() {
      let rows = this.multipleSelection;
      var y = 0;
      for (let x = 0; x <rows.length; x++) {
        for(;y < this.drawerData.length;y++){
          if(rows[x].id == this.drawerData[y].id){
            this.$refs.multipleTable.toggleRowSelection(this.drawerData[y],true);
            break;
          }
        }
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    findAllRole() {
      $findAllRole().then((res) => {
          if (res.data.success) {
            this.tableData = res.data.data.findAllRole;
            this.total = this.tableData.length;
          }else{
            this.message(res);
          }
      });
    },

    bitRolebtn(row){
      var prompt = row.status == 0 ? "禁用" : "解除禁用";
      this.$confirm("是否" + prompt + "该角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          $bitRole(row.id).then((res) => {
            this.message(res);
            this.findAllRole();
          });
        })
        .catch(() => {});
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.findMenuPage();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "success-row";
      } else if (rowIndex % 2 === 0) {
        return "warning-row";
      }
      return "";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findMenuPage();
    },
  },
};
</script>



<style scoped>


.open-add-role{
  height:320px;
}
.update-role-menu{
  float:right;
  height:35px;
  width:70px;
  margin-top:10px;
  margin-right:20px;
}
.drawer-table{
  height:600px;
  overflow-y:scroll;
}
.resettingAccountPass {
  width: 100px;
  height: 35px;
  margin-left: 35px;
}

.contianer {
}

.main {
  width: 90%;
  margin: 0 auto;
}

.el-table .warning-row {
  background: #e7e6e6;
}

.el-table .success-row {
  background: #7ff5df;
}

.el-table tbody tr:hover > td {
  background-color: #cccccc !important;
}
</style>

<style scoped>
* {
  font-family: "Hiragino Sans GB";
}

* {
  margin: 0;
  padding: 0;
}

.imgUtils {
  width: 80px;
  height: 30px;
}


.selectFind {
    margin-top: 10px;
    margin-right: 60px;
    float: left;
  }
  
  .contianer {
    height: 500px;
  }
  
  .tableImg {
    width: 30px;
    height: 30px;
  }
  
  .page {
    margin-top: 20px;
    margin-right: 60px;
    float: right;
  }
  
  .tableNoImg {
    width: 30px;
    height: 30px;
    margin-left: 7px;
  }
</style>

<style>


.el-table .warning-row {
  background: #e7e6e6;
}

.el-table .success-row {
  background: #7ff5df;
}

.el-table tbody tr:hover > td {
  background-color: #cccccc !important;
}
</style>

